<template>
  <div class="updataPlanDlg" >
    <el-dialog
      witdh="60%"
      title="计划"
      :close-on-click-modal="false"
      :visible="showDialog"
      @close="clickClose"
    >
      <el-form
        ref="planFrom"
        :model="planFrom"
        :rules="rules"
        class="planFrom"
        label-width="100px"
        :disabled="able"
      >
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="planFrom.name"></el-input>
        </el-form-item>

        <el-form-item label="环境选择">
          <el-select v-model="planFrom.venid_id" placeholder="请选择">
            <el-option
              v-for="item in envlsit"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择用例">
          <el-button type="primary" @click="selectDlg">选择用例</el-button>
        </el-form-item>

        <el-form-item label="用例列表">
          <el-table :data="planFrom.caselist" style="width: 100%" stripe border>
            <el-table-column
              prop="index"
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="id"
              label="用例编号"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="用例名称"
              width="130"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="apimethod"
              label="请求类型"
              width=""
            ></el-table-column>
            <el-table-column
              prop="api"
              label="接口路径"
              width="250"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="130">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="移除"
                  placement="top-start"
                >
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    circle
                    size="mini"
                    @click="caseMove(scope.row.id, scope.$index)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="上移"
                  placement="top-start"
                >
                  <el-button
                    type="success"
                    icon="el-icon-caret-top"
                    circle
                    size="mini"
                    @click="setUp(scope.row.id, scope.$index)"
                  >
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="item"
                  effect="dark"
                  content="下移"
                  placement="top-start"
                >
                  <el-button
                    type="success"
                    icon="el-icon-caret-bottom"
                    circle
                    size="mini"
                    @click="setDown(scope.row.id, scope.$index)"
                  >
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="执行时间">
          <el-input v-model="planFrom.exctime"></el-input>
        </el-form-item>

        <el-form-item label="企业消息">
          <el-radio-group v-model="planFrom.qymsg">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="webhook">
          <el-input v-model="planFrom.webhook"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <GetCaseDialog ref="getCase" />
  </div>
</template>

<script>
import GetCaseDialog from "./getCaseDialog";
import { getCenv, getPlanDetail, updataPlan } from "@/network/networks";
import { Loading } from 'element-ui';
export default {
  components: {
    GetCaseDialog,
  },
  data() {
    return {
      showDialog: false, //判断dlg是否展示
      rowid: 0, //用来取值
      able: false, //判断是否可以编辑
      planFrom: {},
      envlsit: [],

      rules: {
        name: [
          { required: true, message: "请输入环境名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    //弹出选择用例对话框
    selectDlg() {
      this.$refs.getCase.showDialog = true;
    },

    //x掉对话框
    clickClose() {
      this.showDialog = false;
      this.rowid = -1;
      this.$parent.getPlan();
    },

    setCaselist(arr) {
      for (var j = 0; j < arr.length; j++) {
        if (this.judgeisEpty(arr[j])) {
          this.planFrom.caselist.push(arr[j]);
        }
      }
    },

    judgeisEpty(data) {
      for (var i = 0; i < this.planFrom.caselist.length; i++) {
        if (this.planFrom.caselist[i].id == data.id) {
          return false;
        }
      }
      return true;
    },

    getPlanDetail() {
      if (this.rowid == -1) {
        return;
      }
      getPlanDetail({
        rowid: this.rowid,
      })
        .then((res) => {
          if (res.code == 1) {
            this.planFrom = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error(res.msg);
        });
    },

    getEnvlist() {
      if (this.rowid == -1) {
        return;
      }
      getCenv()
        .then((res) => {
          if (res.code == 1) {
            this.envlsit = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    caseMove(id, index) {
      if (this.planFrom.caselist[index].id == id) {
        this.planFrom.caselist.splice(index, 1);
      } else {
        this.$message.error("数据问题:id与index不匹配，移除失败");
      }
    },
    setUp(id, index) {
      if (index == 0) {
        this.$message.warning("第一条不能上移了");
      } else if (this.planFrom.caselist[index].id == id) {
        var data = this.planFrom.caselist[index];
        this.planFrom.caselist[index] = this.planFrom.caselist[index - 1];
        this.planFrom.caselist[index - 1] = data;
        this.planFrom.caselist.splice(1, 0);
        this.$message.success("用例上移成功");
      } else {
        this.$message.error("数据问题:id与index不匹配，上移失败");
      }
    },
    setDown(id, index) {
      if (index + 1 == this.planFrom.caselist.length) {
        this.$message.warning("最后一条不能下移了");
      } else if (this.planFrom.caselist[index].id == id) {
        var data = this.planFrom.caselist[index];
        this.planFrom.caselist[index] = this.planFrom.caselist[index + 1];
        this.planFrom.caselist[index + 1] = data;
        this.planFrom.caselist.splice(1, 0);
        this.$message.success("用例下移成功");
      } else {
        this.$message.error("数据问题:id与index不匹配，下移失败");
      }
    },

    updataPlan() {
      this.$refs["planFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let loadingInstance = Loading.service({
            text: '请稍等',
            target: document.querySelector('.el-dialog')
        });
        updataPlan(this.planFrom)
          .then((res) => {
            if (res.code == 1) {
              this.$message.success(res.msg);
              this.showDialog = false;
              this.rowid = -1;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$messageerror(err);
          });
          loadingInstance.close();
      });
    },

    onSubmit() {
      this.updataPlan();
    },
    onCancel() {
      this.showDialog = false;
    },
  },

  watch: {
    rowid(val) {
      this.getEnvlist();
      this.getPlanDetail();
    },

    able(val) {
      this.getEnvlist();
      this.getPlanDetail();
    },
  },
};
</script>

<style lang="less" scoped>
</style>